<template>
  <el-dialog
    v-model="visible"
    center
    width="400px"
    :before-close="handleClose"
  >
   <span>test...</span>
   <template #footer>
     <el-button @click="handleCancel">取消</el-button>
     <el-button @click="handleConfirm">确认</el-button>
   </template> 
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const emit = defineEmits(['confirm', 'cancel'])
const visible = ref(false)

onMounted(() => {
  visible.value = true
})

const handleConfirm = () => {
  emit('confirm')
  visible.value = false
}

const handleCancel = () => {
  emit('cancel')
  visible.value = false
}

const handleClose = () => {
  emit('cancel')
  visible.value = false
}

onBeforeUnmount(() => {
  
})
</script>